<script setup>

  // 加载list
  import { onMounted, onUnmounted, reactive } from 'vue';

  const props = defineProps({
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    tpName:{
      type:String
    },
    col:{
      type:Number,
      default:2
    }
  });
  const emits = defineEmits(['loadMore']);
  const loadMore = () => {
    emits('loadMore');
    console.log('scrollList emit loadMore');
  };
  onMounted(() => {
    console.log('scrollList 注册 loadMore');
    uni.$on('onReachBottom', loadMore);
  });
  onUnmounted(() => {
    console.log('scrollList 子组件卸载 loadMore');
    uni.$off('onReachBottom', loadMore);

  });
  // 子组件1
</script>
<!--      <view v-for="(_, slotName) in $slots"-->
<!--            :key="slotName"-->
<!--            #[slotName]="{ item, index }"-->
<!--      >-->
<!--        <slot :name="slotName"-->
<!--              v-bind="{ item, index }"-->
<!--        />-->
<!--      </view>-->
<template>

  <view v-if="tpName" class="likeing uno-color-red uno-flex uno-flex-justify-center uno-items-center uno-mt-10">
    <view class="line line-left uno-w-150 uno-h-2  "></view>
    <view class="like uno-font-size-5">{{tpName}}</view>
    <view class="line line-right uno-w-150 uno-h-2  "></view>
  </view>

  <up-grid
    :border="false"
    :col="props.col"
    gap="20rpx"
    class="uno-mt4"
  >
    <up-grid-item class="uno-overflow-hidden"
      v-for="(item, index) in data"
      :key="index"
    >
      <slot name="default"
            :item="item" :index="index"
      />
    </up-grid-item>
  </up-grid>
  <slot name="after"></slot>
</template>

<style scoped lang="scss">
  $dark-red-more: #ff1c24;
  .likeing {
    color: $dark-red-more;

    .like {
      font-size: 40rpx;
      font-weight: bold;
      margin: 0 50rpx;
    }

    .line {
      position: relative;
      background-color: $dark-red-more;

      &::after {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background-color: $dark-red-more;

      }

      &-left::after {
        left: 100%;
        top: 0;
        transform: translateY(-50%) translateX(-50%);
      }

      &-right::after {
        right: 100%;
        top: 0;
        transform: translateY(-50%);;
      }
    }

  }
</style>